﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="JtableDemo.aspx.cs" Inherits="MagazineWebForms.JtableDemo" %>


<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
     <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/metroblue/jquery-ui.css" rel="stylesheet" type="text/css" />

    <!-- jTable style file -->
    <link href="/Scripts/jtable/themes/metro/blue/jtable.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/modernizr-2.6.2.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

    <script src="/Scripts/jtablesite.js" type="text/javascript"></script>

    <!-- A helper library for JSON serialization -->
    <script type="text/javascript" src="/Scripts/jtable/external/json2.js"></script>
    <!-- Core jTable script file -->
    <script type="text/javascript" src="/Scripts/jtable/jquery.jtable.js"></script>
    <!-- ASP.NET Web Forms extension for jTable -->
    <script type="text/javascript" src="/Scripts/jtable/extensions/jquery.jtable.aspnetpagemethods.js"></script>

     <div class="site-container">
        <div id="StudentTableContainer"></div>
    </div>
    <script type="text/javascript">

        $(document).ready(function () {

            //Prepare jtable plugin
            $('#StudentTableContainer').jtable({
                title: 'The Student List',
                paging: true,
                pageSize: 10,
                sorting: true,
                defaultSorting: 'UserName ASC',
                actions: {
                    listAction: '/JtableDemo.aspx/UsersList'

                },
                fields: {
                    UserId: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    UserName: {
                        title: 'User Name',
                        width: '23%'
                    },


                    Mail: {
                        title: 'Email address',
                        width: '50%'
                    }



                }
            });

            //Load student list from server
            $('#StudentTableContainer').jtable('load');
        });

    </script>

    </asp:Content>

